<template>
    <div>
<!--
    1.关于内置事件的实现步骤
        第一步：提供事件源（以下这个按钮就是一个事件源）
        第二步：给事件源绑定事件
            v-on事件名 或者 @事件名
        第三步: 编写回调函数，将回调函数和事件进行绑定
        第四步: 等待事件的触发，只要事件触发，则执行回调函数
    2. 关于组件的自定义事件，实现步骤：
        第一步：提供事件源（这个事件源是一个组件）
        第二步：给组件绑定事件
            v-on:事件名        或者 @事件名
        第三步：编写回调函数，将回调函数和事件进行绑定
        第四步：等待事件的触发，只要事件触发，则执行回调函数:
            对于组件自定义事件来说，要想让事件发生，需要去执行一段代码。
            这段代码负责去触发这个事件，让这个事件发生。
            这段代码再哪里写？
            > 事件绑定A组件上，则触发这个事件的代码要在A组当中编写。
    3. 总结：到目前为止：父子组件之间如何通信:
        父————> 子；
            props
        子——————> 父：
            第一种方式：在父中定义一个方法，将方法传递给子，然后在子中调用父传过来的方法，这样给父传数据。（这种方式以后很少使用）
            第二种方式：使用组件的自定义事件的方式，也可以完成子向父传数据。
                App组件是父组件
                User组件是子组件
                子组件向父组件传数据（User给App组件传数据）
                    在父组件当中绑定事件
                    在子组件当中触发事件
                 父绑定，子触发

    -->
        <button @click="hello">内置事件的实现步骤</button>

<!--        给 User 组件绑定一个自定义的事件-->
        <User v-on:event1="doSome"></User>

<!--        简写形式-->
        <User @event1="doSome"></User>


<!--        简写，表示该事件只会触发一次执行一次-->
        <User @event1.once="doSome"></User>

<!--        准备一个组件-->
        <User ref="user"></User>
        <User ref="user"></User>

    </div>
</template>


<script>
    import User from './components/User'
    export default {
        name:'App',
        mounted() {

            // 给 ref = "user"的组件绑定 event1事件，并且给event1事件绑定一个回调函数:doSome
            // this.$refs.user.$on('event1',this.doSome)
            this.$refs.user.$on('event2',this.doOther)

            // 保证事件只触发一次
            this.$refs.user.$once('event1',this.doSome)

            // 如果回调函数是普通函数
            // 函数体当中的this是User组件实例，不是App组件实例。
/*            this.$refs.user.$on('event1',function () {
                console.log(this)
            })*/

            // 如果回调函数是箭头函数: 那么函数体当中的this就是 App 组件实例
            // 箭头函数是继承当前环境的，也就是 app
            this.$refs.user.$on('event1',()=>{
                console.log(this)
            })
        },
        methods:{
            hello(){
                console.log('hello vue!')
            },
            /*doSome(name,age,gender){
                console.log(666);
                console.log(name,age,gender);
            }*/

            // ES6的语法,...params这个params可以看做是一个数组，以数组的形式接收多个参数
            doSome(name,...params){
                console.log(name,params)
                console.log(this)
            },
            doOther(){
                console.log('do other')
            }
        },
        components:{User}
    }

</script>